<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡和阻止</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('div').bind('click',function () {
            //     alert('div');
            // });
            // $('input').bind('click',function (event) {
            //     event.stopPropagation();//阻止冒泡
            //     alert('input');
            // });
            // $(document).bind('click',function () {
            //     alert('document');
            // });
            // $('a').bind('click',function (event) {
            //     alert("123");
            //     event.preventDefault();//不再跳转
            //
            // });

            // $('input').bind('click',function (event) {
            //     event.preventDefault();//阻止提交跳转
            //     alert("input");
            // });
            // $('form').submit(function (event) {
            //     event.preventDefault();
            //     alert("form");
            // });
///////////////////////////////////////////////////////////////////////////////////////////////////////////
//             $('div').bind('click',function () {
//                 alert('div');
//             });
//             $('input').bind('click',function (event) {
//                 // event.stopPropagation();//阻止冒泡
//                 // event.preventDefault();//取消跳转
//                 alert('input');
//                 return false;
//             });
//             $(document).bind('click',function () {
//                 alert('document');
//             });
//             $('a').bind('click',function (event) {
//                 // alert("123");
//                 event.preventDefault();//不再跳转
//                 // event.stopPropagation();//取消冒泡
//                 alert(event.isDefaultPrevented());//判断是否被调用，如果调用了 返回true 如果没调用 则返回false
//
//                 alert(event.isPropagationStopped());//true
//                 return false;
//             });
//             $('a').bind('click',function (event) {
//
//                 alert(event.isDefaultPrevented());//true判断是否被调用，如果调用了 返回true 如果没调用 则返回false
//
//                 alert(event.isPropagationStopped());//true 在另外的绑定函数里可以判断以前是否用
//                 alert(event.stopImmediatePropagation());//把之后相关的方法全部取消
//             });
//             $('a').bind('click',function (event) {
//                 alert("123");
//             });
/////////////////////////////////////////////////////////////////////////////////////////////////////
        });

    </script>
</head>
<body>
<form action="test.html">
    <div style="width: 200px;height: 200px;background-color: gray">
<!--    <input type="button" value="button">-->
        <input type="submit" value="button">
    <a href="http://www.baidu.com" target="_blank">baidu</a><!--自动跳转就是a的默认行为-->
    </div>
</form>
<script>
    /* 事件对象
        1.事件冒泡 子元素与父元素绑定相同的事件 激发子元素的事件 会连带父元素相同的事件也被激发
        2.默认行为阻止 取消默认行为 event.preventDefault()
        表单的提交 取消默认行为

        阻止冒泡：event.stopPropagation()
       3.既想阻止冒泡 又想取消默认行为
            两种方法   1.event.stopPropagation()
                        event.preventDefault()
                        写在一起 这样不好记忆
                       2. return flase
        4. event.isDefaultPrevented()  判断是否被调用，如果调用了 返回true 如果没调用 则返回false
    * */
</script>
</body>
</html>